<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>我的视频</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link rel="icon" th:href="@{/pagesResource/img/icon.png}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/animate.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/bootstrap.min.css}">
<!--    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/fontello.css}">-->
<!--    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/fontello-codes.css}">-->
<!--    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/thumbs-embedded.css}">-->
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/iconfont.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/style.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/responsive.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/color.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/boostrapFileInputResources/css/fileinput.min.css}">
    <script src="/js/sweetAlert.js"></script>
    <style>
        td{
            text-align:center;
            vertical-align:middle;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div th:include="main/simpleHeader :: header"></div>
</div>
<br>
<div class="container" style="max-width: 900px;">
    <table id="table"  class="table table-bordered table-striped table-hover">
        <thead>
        <tr>
            <th>订单号</th>
            <th>订单类型</th>
            <th>订单总金额</th>
            <th>订单状态</th>
            <th>订单创建时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="orderInfo : ${orderInfoPage.records}">
            <td th:text="${orderInfo.orderNum}"></td>
            <td th:text="${orderInfo.subPackId}"></td>
            <td th:text="${orderInfo.total}"></td>
            <td th:text="${orderInfo.status}"></td>
            <td th:text="${orderInfo.createDate}"></td>

            <td>
                <a class="btn btn-info btn-xs" th:href="@{/order/payOrder(total=${orderInfo.total})}">支付订单</a> &nbsp;  &nbsp;&nbsp;
                <a class="btn btn-danger btn-xs" th:onclick="'cancelOrderById('+${orderInfo.orderId}+')'">取消订单</a> &nbsp;  &nbsp;&nbsp;
            </td>
        </tr>
        </tbody>
    </table>
    <div >
        <div class="center " style="padding-left: 45%;!important;">
            <a th:href="@{/order/myOrder(page=${orderInfoPage.current}-1)}"
               th:class="${orderInfoPage.current == 1}? 'disabled btn btn-primary btn-xs':'btn btn-primary btn-xs'"
                >上一页</a>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;
            <a th:href="@{/order/myOrder(page=${orderInfoPage.current}+1)}"
               th:class="${orderInfoPage.current == orderInfoPage.pages?'disabled btn btn-primary btn-xs':'btn btn-primary btn-xs'}" >下一页</a>
        </div>
    </div>
    <div>
        <div class="center " style="padding-left: 45%;!important;">
            当前第 [[${orderInfoPage.current}]]页,共 [[${orderInfoPage.pages}]] 页.一共 [[${orderInfoPage.total}]] 条记录
        </div>
    </div>
</div>


<script th:src="@{/boostrapTemplatResources/js/html5shiv.js}"></script>
<script th:src="@{/boostrapTemplatResources/js/respond.min.js}"></script>

<!-- jQuery -->
<script th:src="@{/boostrapTemplatResources/vendor/jquery/jquery.min.js}"></script>

<!-- Bootstrap Core JavaScript -->
<script th:src="@{/boostrapTemplatResources/vendor/bootstrap/js/bootstrap.min.js}"></script>

<!-- Metis Menu Plugin JavaScript -->
<script th:src="@{/boostrapTemplatResources/vendor/metisMenu/metisMenu.min.js}"></script>

<!-- Morris Charts JavaScript -->
<script th:src="@{/boostrapTemplatResources/vendor/raphael/raphael.min.js}"></script>
<script th:src="@{/boostrapTemplatResources/vendor/morrisjs/morris.min.js}"></script>
<script th:src="@{/boostrapTemplatResources/data/morris-data.js}"></script>

<!-- Custom Theme JavaScript -->
<script th:src="@{/boostrapTemplatResources/dist/js/sb-admin-2.js}"></script>
<script th:src="@{/pagesResource/js/script.js}"></script>
<script type="text/javascript">



    /**
     * 根据ID删除视频
     */
    function cancelOrderById(id) {
        swal({
            title: "取消订单弹框",
            text: "您确定要支付该订单吗?",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        }).then((flag) => {
            if(flag) {
                $.ajax(
                    {
                        type: "GET",
                        url: "/order/cancelOrder?orderId="+id,
                        async: false,
                        cache: true,
                        data: {

                        },
                        success: function (data) {
                            if(data["isCancel"] == true) {
                                swal("已成功取消!", {
                                    buttons: false,
                                    timer: 3000
                                });
                                setTimeout(function(){window.location.reload(); },1100);
                            } else {
                                swal("Error", "取消失败", "error");
                            }
                        },
                        error: function (data) {
                            swal("Error", "网络错误，请联系管理员！", "error");
                        }
                    }
                );
            }
        } );
    }
</script>
</body>
</html>